<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计页面测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .success { color: green; }
        .error { color: red; }
        .data { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 3px; }
        pre { white-space: pre-wrap; }
    </style>
</head>
<body>
    <h1>统计页面API测试</h1>
    
    <div class="test-section">
        <h2>1. 登录测试</h2>
        <button onclick="testLogin()">测试登录</button>
        <div id="login-result"></div>
    </div>
    
    <div class="test-section">
        <h2>2. 统计API测试</h2>
        <button onclick="testStats()" disabled id="stats-btn">测试统计API</button>
        <div id="stats-result"></div>
    </div>
    
    <div class="test-section">
        <h2>3. 前端数据加载测试</h2>
        <button onclick="testFrontendData()" disabled id="frontend-btn">测试前端数据加载</button>
        <div id="frontend-result"></div>
    </div>

    <script>
        let authToken = '';
        
        async function testLogin() {
            const resultDiv = document.getElementById('login-result');
            resultDiv.innerHTML = '正在登录...';
            
            try {
                const response = await fetch('http://localhost:5000/api/auth/login/email', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        email: 'admin@aide.com',
                        password: 'admin123456'
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    authToken = data.token;
                    localStorage.setItem('auth_token', authToken);
                    resultDiv.innerHTML = `<div class="success">✅ 登录成功！Token: ${authToken.substring(0, 20)}...</div>`;
                    document.getElementById('stats-btn').disabled = false;
                    document.getElementById('frontend-btn').disabled = false;
                } else {
                    resultDiv.innerHTML = `<div class="error">❌ 登录失败: ${data.error || data.message}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 登录错误: ${error.message}</div>`;
            }
        }
        
        async function testStats() {
            const resultDiv = document.getElementById('stats-result');
            resultDiv.innerHTML = '正在测试统计API...';
            
            const apis = [
                { name: '概览统计', url: '/stats/overview' },
                { name: '分类分布', url: '/stats/category-distribution' },
                { name: '优先级分布', url: '/stats/priority-distribution' },
                { name: '时间趋势', url: '/stats/time-trends?days=7' },
                { name: '效率分析', url: '/stats/efficiency' },
                { name: '标签使用', url: '/stats/tag-usage' }
            ];
            
            let results = '';
            
            for (const api of apis) {
                try {
                    const response = await fetch(`http://localhost:5000/api${api.url}`, {
                        headers: {
                            'Authorization': `Bearer ${authToken}`
                        }
                    });
                    
                    const data = await response.json();
                    
                    if (data.success) {
                        results += `<div class="success">✅ ${api.name}: 成功</div>`;
                        results += `<div class="data"><pre>${JSON.stringify(data.data, null, 2)}</pre></div>`;
                    } else {
                        results += `<div class="error">❌ ${api.name}: ${data.error || '未知错误'}</div>`;
                    }
                } catch (error) {
                    results += `<div class="error">❌ ${api.name}: ${error.message}</div>`;
                }
            }
            
            resultDiv.innerHTML = results;
        }
        
        async function testFrontendData() {
            const resultDiv = document.getElementById('frontend-result');
            resultDiv.innerHTML = '正在测试前端数据加载...';
            
            try {
                // 模拟前端的数据加载逻辑
                const [overviewResult, categoryResult, trendsResult] = await Promise.all([
                    fetch('http://localhost:5000/api/stats/overview', {
                        headers: { 'Authorization': `Bearer ${authToken}` }
                    }).then(r => r.json()),
                    fetch('http://localhost:5000/api/stats/category-distribution', {
                        headers: { 'Authorization': `Bearer ${authToken}` }
                    }).then(r => r.json()),
                    fetch('http://localhost:5000/api/stats/time-trends?days=7', {
                        headers: { 'Authorization': `Bearer ${authToken}` }
                    }).then(r => r.json())
                ]);
                
                let results = '<div class="success">✅ 前端数据加载测试完成</div>';
                
                if (overviewResult.success) {
                    results += `<div class="data"><strong>概览数据:</strong><pre>${JSON.stringify(overviewResult.data, null, 2)}</pre></div>`;
                }
                
                if (categoryResult.success) {
                    results += `<div class="data"><strong>分类数据:</strong><pre>${JSON.stringify(categoryResult.data, null, 2)}</pre></div>`;
                }
                
                if (trendsResult.success) {
                    results += `<div class="data"><strong>趋势数据:</strong><pre>${JSON.stringify(trendsResult.data, null, 2)}</pre></div>`;
                }
                
                resultDiv.innerHTML = results;
                
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 前端数据加载错误: ${error.message}</div>`;
            }
        }
    </script>
</body>
</html>
